<!-- 新增电子公章 -->
<template>
  <div id="dialog-container">
    <el-dialog v-dialogDrag :title="'新增电子公章'" append-to-body :close-on-click-modal="false"
      :visible.sync="dialogVisible" @close="$emit('update:show', false)" :before-close="handleClose" :show="show" width="700px">
      <el-form :model="formData" :rules="rules" :inline="true" label-width="130px" size="small" ref="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="电子公章名称：" prop="name">
              <el-input v-model="formData.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号：" prop="userId">
              <el-input v-model="formData.userId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用位置：" prop="usePosition">
              <el-input v-model="formData.usePosition"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input v-model="formData.remark" style="width: 500px"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传附件：">
              <el-upload
                class="upload-demo"
                ref="upload"
                :action="uploadUrl"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                :data="uploadData" 
                :on-success="uploadSuccess"
                list-type="picture"
                :auto-upload="false">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1张</div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {saveElecSeal} from 'service/task';
  export default {
    data() {
      return {
        dialogVisible: false,
        uploadUrl: `${process.env.API_URL}elecSeal/upload`,
        formData: {
          name: '',
          usePosition: '',
          remark: '',
          userId: ''
        },       
        isShowChoose: false,
        fileList: [],
         uploadData: {
          elecSealId: ''
        },
         rules: {
          name: [
            { required: true,
          message: '请输入电子公章名称',
           trigger: 'blur' 
           }
           ],
            userId: [
            { required: true,
          message: '请输入工号',
           trigger: 'blur' 
           }
           ],
          usePosition: [
            { required: true,
             message: '请输入使用位置',
              trigger: 'blur' 
              }
              ],
        }
      };
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      show() {
        this.fileList = [];
        this.dialogVisible = this.show;
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.dialogVisible = false;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      // 选择工号
      choose() {
        this.isShowChoose = true;
      },
      uploadSuccess(res, file, fileList) {
        console.log(res)
        console.log(file);
        if (res.success) {
          for(let i = 0; i < fileList.length; i++) {
            fileList.splice(i, 1);
          }
          let file = {
                name: res.data.result.elecPicName,
                url: `${process.env.API_URL}elecSeal/downloadAttach?elecSealId=${res.data.result.id}`,
                status: 'success',
                percentage: 100,
          };
          fileList.add(file);
         this.$message({
            message: res.data.message,
            type: 'success',
            duration: 1000
            });
        } else {
          this.$alert(res.message, "提示", {
            type: "success"
          });
        }
      },
      submitForm(formName) {
        console.log(this.formData);
        this.$refs[formName].validate((valid) => {
        if (valid) {
          saveElecSeal({
          // this.axios.post("/task/saveApply", {
              name: this.formData.name,
              usePosition: this.formData.usePosition,
              remark: this.formData.remark,
              userId: this.formData.userId
            }).then(res => {
              // console.log(res)
              if(res.data.success) {
                this.uploadData.elecSealId = res.data.result.id;
                 this.$refs.upload.submit();
                // this.$alert('保存成功！', '提示', {
                //   type: 'success'
                // })
                this.$emit('refreshAdd');
              }
              this.dialogVisible = false;
            })
        } else {
          changeFormitemSpace(document);
          return false;
        }
      });
      }
    }
  }

</script>
